<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="articles">
        <article>
            <figure>
                <img src="assets/lavender-field.jpg" alt="Lavender Fields">
            </figure>
            <div class="article-preview">
                <h2>Lavender Fields</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Praesent in mauris eu tortor porttitor accumsan.
                </p>
            </div>
        </article>
        <article>
            <figure>
                <img src="assets/snow-scenery.jpg" alt="Snowy Mountains">
            </figure>
            <div class="article-preview">
                <h2>Snowy Mountains</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Praesent in mauris eu tortor porttitor accumsan.
                </p>
            </div>
        </article>
        <article>
            <figure>
                <img src="assets/wooden-bridge.jpg" alt="Wooden Bridge">
            </figure>
            <div class="article-preview">
                <h2>Wooden Bridge</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Praesent in mauris eu tortor porttitor accumsan.
                </p>
            </div>
        </article>
        <article>
            <figure>
                <img src="assets/autumn.jpg" alt="Autumn Forest">
            </figure>
            <div class="article-preview">
                <h2>Autumn Forest</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor
                    accumsan.
                </p>
            </div>
        </article>
        <article>
            <figure>
                <img src="assets/forest.jpg" alt="Freezing Forest">
            </figure>
            <div class="article-preview">
                <h2>Freezing Forest</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor
                    accumsan.
                </p>
            </div>
        </article>
    </div>
</body>

</html>